<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--公用头部-->
    <th:block th:replace="common/head::commonHead('用户编辑-小邑')"/>
    <style>
        #formAdvForm .layui-row {
            margin-top: 20px;
        }

        #formAdvForm .layui-form-item {
            margin-bottom: 0;
        }

        #formAdvForm .layui-form-item .layui-inline {
            margin-bottom: 25px;
            margin-right: 0;
        }

        #headImg {
            position: relative;
            border: 1px dashed #e2e2e2;
            background-color: #fff;
            text-align: center;
            cursor: pointer;
            color: #999;
            width: 100px !important;
            height: 100px !important;
            border-radius: 50%
        }

        #headImg .layui-icon {
            font-size: 50px;
            color: #009688
        }
    </style>
</head>
<!--公用js-->
<th:block th:replace="common/head::commonJs"/>
<script>
    var type = null;
    var url = null;
    var id = null;
    var formData = null;
    $(function () {
        id = utils.request.getQueryString("id");
        type = utils.request.getQueryString("type");
        $("#formAdvForm .layui-row").css("marginLeft","45%");
        if (type == 2) {
            url = basePath + '/user/editUser';
        } else {
            url = basePath + '/user/addUser';
        }
    })
</script>
<body marginwidth="0" marginheight="0">
<form class="layui-form" action="" id="formAdvForm" lay-filter="formAdvForm">
    <div class="layui-fluid  layui-fluid-btn">
        <div class="layui-col-md12">
            <div class="layui-card" style="margin: 10px;">
                <div class="layui-card-body">
                    <input name="id" type="text" style="display: none">
                    <div class="layui-form-item layui-row">
                        <div class="layui-inline layui-col-md6">
                            <div id="headImg">
                                <i class="layui-icon" lay-tips="点击上传头像或将文件拖拽到此处" style="line-height: 100px"></i>
                                <img class="layui-hide" src="" lay-tips="点击上传头像或将文件拖拽到此处" style="width: 100px; height: 100px;border-radius: 50%">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline layui-col-md6">
                            <label class="layui-form-label layui-form-required">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" id="username" lay-verify="required"
                                       placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md6">
                            <label class="layui-form-label layui-form-required">生日</label>
                            <div class="layui-input-block">
                                <input type="text" name="birthday" id="birthday" lay-verify="required" readonly
                                       placeholder="请输入生日" autocomplete="off" class="layui-input date-icon">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline layui-col-md6">
                            <label class="layui-form-label layui-form-required">性别</label>
                            <div class="layui-input-block" id="sex">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md6">
                            <label class="layui-form-label layui-form-required">角色</label>
                            <div class="layui-input-block" id="role">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline layui-col-md6">
                            <label class="layui-form-label layui-form-required">邮箱</label>
                            <div class="layui-input-block">
                                <input type="text" name="email" id="email" lay-verify="email" placeholder="请输入邮箱"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md6">
                            <label class="layui-form-label layui-form-required">账号</label>
                            <div class="layui-input-block">
                                <input type="text" name="account" id="account" lay-verify="required" placeholder="请输入账号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline layui-col-md6">
                            <label class="layui-form-label layui-form-required">手机号</label>
                            <div class="layui-input-block">
                                <input type="number" name="phone" id="phone" lay-verify="phone" placeholder="请输入手机号"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md6">
                            <label class="layui-form-label">个人简介</label>
                            <div class="layui-input-block">
                            <textarea type="text" name="personalProfile" id="personalProfile"style="height: 38px;min-height: 38px"  placeholder="请输入个人简介"autocomplete="off" class="layui-textarea"></textarea>
                            </div>
                        </div>
<!--                        <div class="layui-inline layui-col-md6">-->
<!--                            <label class="layui-form-label layui-form-required">密码</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <input type="password" name="password" id="password" lay-verify="psw"-->
<!--                                       placeholder="请输入密码" autocomplete="off" class="layui-input">-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                    <div class="layui-form-item">
<!--                        <div class="layui-inline layui-col-md6">-->
<!--                            <label class="layui-form-label layui-form-required">确认密码</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <input type="password" lay-verify="equalTo" lay-equalTo="#password" placeholder="请确认密码"-->
<!--                                       autocomplete="off" class="layui-input">-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                    <div class="form-group-bottom">
                        <button id="subBtn" class="xy-btn xy-btn-primary subCheckBtn" lay-submit lay-filter="formBtn">提交</button>
                        <button type="reset" class="xy-btn ">重置</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script>

    layui.use(['layer', 'jquery', 'form', 'formX', 'laydate', 'notice', 'xmSelect', 'upload'], function () {
        var $ = layui.jquery
            , form = layui.form
            , formX = layui.formX
            , xmSelect = layui.xmSelect
            , upload = layui.upload
            , laydate = layui.laydate
            , notice = layui.notice
            , layer = layui.layer;
        //拖拽上传
        upload.render({
            elem: '#headImg'
            , url: ""
            , accept: 'images' //图片格式
            , exts:"jpg|png|jpeg"//允许上传的文件后缀
            , auto : false //是否选完文件后自动上传
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    layui.$('#headImg img').removeClass('layui-hide').attr('src', result);
                    layui.$('#headImg i').addClass('layui-hide');
                });
            }
            //操作成功的回调
            ,done: function (res, index, upload) {
            }
            //上传错误回调
            ,error: function (index, upload) {
                top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
            }
        });

        /*生日*/
        laydate.render({
            elem: '#birthday',
            theme: '#393D49'
        });
        /*性别下拉*/
        var sex = xmSelect.render({
            el: '#sex',
            layVerify: 'required',
            layVerType: 'msg',
            tips: "性别",
            radio: true,
            clickClose: true,
            theme: {
                color: '#8799a3',
            },
            model: {
                icon: "hidden",
            },
            data: [
                {name: "男", value: "男",selected: utils.request.getQueryString('sexName')=='男'?true:false},
                {name: "女", value: "女",selected: utils.request.getQueryString('sexName')=='女'?true:false}
            ],
            on: function (data) {
            },
        });
        /*角色下拉*/
        var role = xmSelect.render({
            el: '#role',
            layVerify: 'required',
            layVerType: 'msg',
            initValue:!isEmpty(utils.request.getQueryString('roleIds'))?[utils.request.getQueryString('roleIds')]:[],
            tips: "角色",
            theme: {
                color: '#8799a3',
            },
            model: {
                // label: {type: 'text'},
                icon: "hidden",
            },
            prop: {
                name: 'roleName',
                value: 'id'
            },
            data: [],
            on: function (data) {
            },
        });
        roleInit();
        //监听提交
        form.on('submit(formBtn)', function (data) {
            var form = document.getElementById("formAdvForm");
            var formData = new FormData(form);
            if (type == 2) {
                if (isEmpty(formData.get("id"))) {
                    formData.append("id",id);
                }
            }
            formData.append("sex",sex.getValue("nameStr"));
            formData.append("roleIds",role.getValue("valueStr"));
            var loadIndex = null;
            checkSubBtn(1);
            sendAjaxPostFileToCallback(
                url,
                formData,
                function (result){
                    if (result.success){
                        // 提示信息
                        top.layui.notice.msg(result.msg ,{icon: 1,position:"topCenter"});
                        // 获取当前iframe层的索引
                        var index = parent.layer.getFrameIndex(window.name);
                        // 关闭弹窗
                        parent.layer.close(index);
                        // 重载表格
                        parent.layui.table.reload('userTable',{});
                    }else{
                        checkSubBtn(2);
                        top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                    }
                },
                function (data) {
                    checkSubBtn(2);
                    if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                        top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                    }else{
                        top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                    }
                },
                function (){
                    loadIndex = layer.load(1);
                },
                function (){
                    layer.close(loadIndex);
                },
            )
            return false;
        });
        /*修改回填表单*/
        if (type == 2) {
            //获取详情信息，填充表单
            var loadIndex = null;
            sendAjaxPostToCallbackAsync(
                basePath + '/user/detailUser',
                {id: id},
                false,
                function (result) {
                    if (result.success == true) {
                        if (!isEmpty(result.data.headImg)){
                            layui.$('#headImg img').removeClass('layui-hide').attr('src', fjHttp+result.data.headImg);
                            layui.$('#headImg i').addClass('layui-hide');
                        }
                        layui.form.val('formAdvForm', result.data);
                    } else {
                        top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                    }
                },
                function (data) {
                    if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                        top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                    }else{
                        top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                    }
                },
                function () {
                    loadIndex = layer.load(1);
                },
                function () {
                    layer.close(loadIndex);
                },
            )
        }

        /*角色下拉 初始化*/
        function roleInit() {
            $.ajax({
                url: window.basePath + '/role/list',
                method: 'post',
                success: function (res) {
                    role.update({
                        data: res.data,
                        autoRow: true,
                    })
                }
            });
        }
    });
</script>
</body>
</html>
